<script>
import { ELECTRIC_ZH, GAS_ZH, COAL_ZH, OTHER_ZH } from '@/config'
import GlobalFilterListener from './GlobalFilterListener.vue'
export default {
  name: 'analysis-of-energy-consumption-structure',
  mixins: [GlobalFilterListener],
  props: {
    labelColor: {
      type: String,
      default: '#8bb5f9'
    }
  },
  data () {
    return {
      ds: this.rand()
    }
  },
  computed: {
    chartOption () {
      const ds = this.ds
      return {
        tooltip: {
          show: false
        },
        series: [
          {
            name: '能源消费结构分析',
            type: 'pie',
            radius: ['50%', '80%'],
            center: ['50%', '50%'],
            itemStyle: {
              borderRadius: 6,
              borderWidth: 1,
              borderColor: '#011933',
            },
            label: {
              show: false,
              position: 'center',
              color: '#fff',
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 14,
                fontWeight: 'bold',
                color: '#fff',
                formatter: '{b}\n{d}%'
              }
            },
            data: ([ELECTRIC_ZH, COAL_ZH, GAS_ZH, OTHER_ZH]).map((v, i) => ({
              name: v,
              value: ds[i]
            }))
          }
        ]
      }
    }
  },
  mounted () {
    this.showTips()
  },
  methods: {
    eventBusHandler () {
      this.ds = this.rand()
    },
    rand () {
      const ds = Array(4).fill(1).map(v => (Math.random() * 5000 + 2000).toFixed(2))
      ds.sort((a, b) => b - a)
      return ds
    },
    showTips () {
      const chart = this.$refs.chart
      const length = 4
      let i = 0
      this.timer = setInterval(() => {
        chart.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
          dataIndex: (i - 1) % length,
        })
        chart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: (i++) % length
        })
      }, 1e3)
    },
  }
}
</script>

<template>
  <div class="block-item">
    <div class="flex align-center item-head">
      <svg-icon class="item-icon" name="set"></svg-icon>
      <div class="head-title">
        <h3 class="primary-title">能源消费结构分析</h3>
        <p class="secondary-title">Analysis of energy consumption structure</p>
      </div>
    </div>
    <div class="item-body">
      <div class="item-content" ref="container">
        <v-chart ref="chart" :option="chartOption" style="width: 100%;height: 160px;"></v-chart>
      </div>
    </div>
  </div>
</template>

